<script setup lang="ts">
import Map3D from './index.vue'
import geoData from './assets/data/geoData.json'
import bgData from './assets/data/planeGeoData.json'
import scatterData from './assets/data/scatterData.json'
import { mapConfig, scatterConfig, bgConfig } from './assets/data/config'

const legendValue = ref(['国家级园区', '省级园区'])
const scatterDataRef = ref(scatterData)

const handleLegendChange = (value: string[]) => {
  scatterDataRef.value = scatterData.filter((item) => value.includes(item.type))
}
</script>

<template>
  <div class="root">
    <Map3D
      :geo-data="geoData"
      :map-config="mapConfig"
      :scatter-config="scatterConfig"
      :scatter-data="scatterDataRef"
      :bg-data="bgData"
      :bg-config="bgConfig"
    />
    <div class="legend">
      <div class="title">图例</div>
      <n-checkbox-group v-model:value="legendValue" @update:value="handleLegendChange">
        <n-checkbox value="国家级园区">
          <img class="img" src="/img/icons/legend-country-park.png" width="18" height="18" />
          国家级园区
        </n-checkbox>
        <n-checkbox value="省级园区">
          <img class="img" src="/img/icons/legend-province-park.png" width="18" height="18" />

          省级园区
        </n-checkbox>
      </n-checkbox-group>
    </div>
  </div>
</template>

<style scoped lang="less">
.root {
  background: linear-gradient(180deg, #edf5fc 0%, #c4d7f1 100%);
  border: 1px solid #ccc;
  // width: 100%;
  // height: 100%;
  width: 70%;
  height: 800px;
  // transform: translate(100px, 100px);
  margin-top: 10vh;
  margin-left: 200px;
}
.legend {
  position: absolute;
  width: 160px;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  bottom: 90px;
  right: 500px;
  color: #ccc;
  padding: 12px;
  .title {
    margin-bottom: 8px;
  }
  .img {
    display: inline-block;
    width: 18px;
    height: 18px;
  }
}
</style>
